<template>
    <div class="login">
        <div class="flex">
            <div class="left" data-drop="move">
                <div class="project" draggable="true" data-effect="copy">语文</div>
                <div class="project" draggable="true" data-effect="copy">数学</div>
                <div class="project" draggable="true" data-effect="copy">英语</div>
            </div>
            <div class="content">
                <div class="selectbox" data-drop="copy" v-for="(item, index) in 36" :key="index"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    mounted() {
        const flex = document.querySelector(".flex");
        let source;
        // 拖拽开始的事件
        flex.ondragstart = (e) => {
            // 可以在元素中加入自定义属性 data-effect="copy"或者"move",指定鼠标移入的状态
            e.dataTransfer.effectAllowed = e.target.dataset.effect; //鼠标状态为移动，默认为copy
            source = e.target; //记录拖拽元素
        };
        // // 拖拽到某个元素的事件
        flex.ondragover = (e) => {
            // 浏览器默认阻止拖拽时间，需要 e.preventDefault() 设置可以拖拽
            e.preventDefault();
        };
        function clearDropStyle() {
            document.querySelectorAll(".drop-over").forEach((node) => {
                node.classList.remove("drop-over");
            });
        }
        // 查看拖拽移入的元素是否有自定义属性 data-drop="true"，如果有，返回元素节点，元素变色，否则，一直查找父元素，直至找到有自定义属性 data-drop="true"的父元素
        function getDropNode(node) {
            while (node) {
                if (node.dataset && node.dataset.drop) {
                    return node;
                }
                node = node.parentNode;
            }
        }
        // 类似鼠标移入某个元素的事件
        flex.ondragenter = (e) => {
            // 清除之前元素加入的样式"drop-over"
            clearDropStyle();
            const dropNode = getDropNode(e.target);
            // 鼠标拖拽进入需要变色的元素，加入自定义属性 data-drop="true",当行拖拽移入的元素data-drop为true时，加入样式"drop-over"
            console.log(e.dataTransfer.effectAllowed);
            if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
                dropNode.classList.add("drop-over"); //添加样式属性
            }
        };
        // 类似鼠标在某个元素拖拽结束的事件
        flex.ondrop = (e) => {
            // 清除之前元素加入的样式"drop-over"
            clearDropStyle();
            const dropNode = getDropNode(e.target);
            // 鼠标拖拽进入需要变色的元素，加入自定义属性 data-drop="true",当行拖拽移入的元素data-drop为true时，加入样式"drop-over"
            if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
                if (dropNode.dataset.drop === "copy") {
                    dropNode.innerHTML = ""; //将拖拽结束位置的元素内容清空
                    const cloned = source.cloneNode(true); //将记录的拖拽元素复制
                    cloned.dataset.effect = 'move'
                    // 拖拽的元素结束拖拽时将自定义属性 data-effect="copy"改为move
                    dropNode.appendChild(cloned);
                } else {
                    // 将拖拽的元素节点删除
                    source.remove();
                }
            }
        };
    },
};
</script>

<style scoped>
.flex {
    display: flex;
}
.left {
    width: 100px;
    background: gray;
}

.project {
    width: 100px;
    height: 50px;
    background: gold;
    line-height: 50px;
    text-align: center;
    color: #fff;
    margin-bottom: 10px;
}

.content {
    margin-left: 20px;
    width: 800px;
    height: 500px;
    background: wheat;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.selectbox {
    width: 110px;
    height: 60px;
    background: gainsboro;
    margin: 10px;
    flex-shrink: 0;
    /* display: grid;
    place-items: center; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-over {
    background: blueviolet;
}
</style>
